<template>
  <div>
    <!--按料号导出-->
    <div v-show="showExport">
      <div class="alerts"
           style="top: 20%;">
        <div class="alertDiv"
             style="width:30%;">
          <div style="text-align: center;line-height: 50px;">
            <strong class="title">按料号物料</strong>
          </div>
          <div class="alertDd"
               style="width: 85%;margin: 10px auto;">
            <el-form label-width="150px"
                     label-positon="left">
              <el-form-item prop="items"
                            label="输入导出的物料id">
                <el-input v-model="prodcutNum"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="buttomF">
            <el-button type="primary"
                       class="textcolor"
                       @click="exportSubmit">确定</el-button>
            <el-button type="primary"
                       class="textcolor"
                       @click.native="exportCancel">取消</el-button>
          </div>
        </div>
      </div>
      <div class="alertBg"></div>
    </div>
    <!--按料号筛选表格-->
    <!-- <el-dialog :title="'料号:'+prodcutNum"
               :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="id"
                         label="id"
                         width="40"></el-table-column>
        <el-table-column property="productCode"
                         label="料号"
                         width="200"></el-table-column>
        <el-table-column property="productId"
                         label="产品id"
                         width="200"></el-table-column>
        <el-table-column property="image"
                         label="产品图片">
          <template slot-scope="scope">
            <img :src="scope.row.image"
                 min-width="70"
                 height="70" />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog> -->
    <!--批量修改价格-->
    <div v-show="showEdit">
      <div class="alerts"
           style="top: 10%;">
        <div class="alertDiv"
             style="width:30%;">
          <div style="text-align: center;line-height: 50px;">
            <strong class="title">批量修改价格</strong>
          </div>
          <div class="alertDd"
               style="width: 85%;margin: 10px auto;">
            <el-form ref="editPriceForm"
                     :model="editPriceForm"
                     label-width="110px"
                     label-positon="left">
              <el-form-item prop="price"
                            label="修改价格为:">
                <div style="width:217px; display: inline-block;">
                  <el-input v-model="editPriceForm.price"
                            placeholder="输入新价格"></el-input>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div class="buttomF">
            <el-button type="primary"
                       class="textcolor"
                       @click="editSubmit">确定</el-button>
            <el-button type="primary"
                       class="textcolor"
                       @click.native="editCancel">取消</el-button>
          </div>
        </div>
      </div>
      <div class="alertBg"></div>
    </div>
    <el-card style="width:100%">
      <p>料号管理</p>
      <el-input placeholder="请输入物料"
                v-model="productNo"
                class="input-with-select"
                style="width: 25%;">
        <el-button slot="append"
                   icon="el-icon-search"
                   @click="getProductList"></el-button>
      </el-input>
      <el-button type="primary"
                 style="margin:15px 15px;"
                 @click="addInfo">新增料号</el-button>
      <el-button type="primary"
                 style="margin:15px -5px;"
                 @click="delSelectedInfo">批量删除</el-button>
      <el-button type="primary"
                 style="margin:15px 15px;"
                 @click="editSelectedInfo">批量修改</el-button>
      <el-button type="primary"
                 style="margin:15px 0px;"
                 @click="exported">按物料导出</el-button>
      <div class="tableBox">
        <el-table ref="multipleTable"
                  :data="tableData"
                  style="width: 100%"
                  height="500">
          <el-table-column type="selection"
                           width="45"
                           label="全选"></el-table-column>
          <!--<el-table-column type="selection" width="50" align="center"></el-table-column>-->
          <el-table-column prop="productCode"
                           label="物料"
                           align="center"></el-table-column>
          <el-table-column prop="productId"
                           label="产品id"
                           align="center"></el-table-column>
          <el-table-column prop="image"
                           label="产品图片"
                           align="center">
            <template slot-scope="scope">
              <img :src="scope.row.image"
                   min-width="70"
                   height="70" />
            </template>
          </el-table-column>
          <el-table-column prop="productNumber"
                           label="料号"
                           align="center"></el-table-column>
          <el-table-column prop="price"
                           label="物料单价(人民币/含税)"
                           align="center"></el-table-column>
          <el-table-column prop="costPrice"
                           label="成本价"
                           align="center"></el-table-column>
          <el-table-column prop="stock"
                           label="库存"
                           align="center"></el-table-column>
          <el-table-column label="操作"
                           align="center"
                           fixed="right"
                           width="250">
            <template slot-scope="scope">
              <el-row>
                <el-button type="primary"
                           size="mini"
                           @click="modifyInfo(scope.row)"
                           icon="el-icon-edit"></el-button>
                <el-button type="primary"
                           size="mini"
                           @click="checkDetail(scope.row,index)">查看详情</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align:center;margin-top:20px"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[5, 10, 15, 20]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { LIAOHAO_LIST, LIAOHAO_ADD, LIAOHAO_UPDATE, LIAOHAO_batchModifyPrice, LIAOHAO_batchDelte, LIAOHAO_DOWNLOAD } from "@/utils/api";
// import { export2Excel } from "@/utils/utils"
import { Message } from "element-ui"
export default {
  data () {
    return {
      prodcutNum: "",
      showExport: false,
      gridData: [],
      dialogTableVisible: false,
      editlist: [],
      editPriceList: [],
      showEdit: false,
      editPriceForm: {
        price: ""
      },
      productCode: "",
      productNo: "",
      id: 0,
      downloadUrl:"https://yzbban.oss-cn-shanghai.aliyuncs.com/",
      tableData: [
        // {
        //   id: 0,
        //   image: "",
        //   manufacturerCode: "12312",
        //   manufacturer: "2335451",
        //   storeInfo: "BMW",
        //   pack: "sfds423g23g",
        //   specsBook: "10",
        //   stock: "吸塑",
        //   pricestocks: "xxx",
        //   productArea: "100"
        // }
      ],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      id: 0
    };
  },
  mounted () {
    this.getProductList();
  },
  methods: {
    exported () {
      this.showExport = !this.showExport
    },
    exportCancel () {
      this.showExport = !this.showExport
    },
    exportSubmit () {
      console.log(this.prodcutNum)
      this.showExport = !this.showExport
      this.dialogTableVisible = !this.ialogTableVisible
      let that = this
      // 这里请求数据
      LIAOHAO_DOWNLOAD({
        productId: this.prodcutNum
      }).then(res => {
        console.log(res.data)
        var url = that.downloadUrl + res.data
        location.href = url
      })
    },

    editSubmit () {
      var idlist = []
      for (let i in this.editlist) {
        idlist.push(this.editlist[i].id)
      }
      LIAOHAO_batchModifyPrice({
        price: this.editPriceForm.price,
        idList: idlist
      }).then(res => {
        if (res.status == 200) {
          this.$message.success(`${idlist}料号价格修改成功`)
          this.getProductList()
          this.showEdit = !this.showEdit
        }
      })
    },
    editCancel () {
      this.showEdit = !this.showEdit
      Message({ message: "取消修改，数据未保存", type: "error", duration: 2000 })
    },
    editSelectedInfo () {
      if (this.$refs.multipleTable.selection.length == 0) {
        Message({ message: "请先勾选要修改的项目", type: "warning", duration: 2000 })
      } else {
        this.editlist = this.$refs.multipleTable.selection
        this.showEdit = !this.showEdit
      }
    },
    delSelectedInfo () {
      if (this.$refs.multipleTable.selection.length == 0) {
        Message({ message: "请先勾选要修改的项目", type: "warning", duration: 2000 })
      } else {
        var deleteList = this.$refs.multipleTable.selection
        var idlist = []
        for (let i in deleteList) {
          idlist.push(deleteList[i].id)
        }
        LIAOHAO_batchDelte({
          idList: idlist
        }).then(res => {
          if (res.status == 200) {
            Message({ message: `${idlist}号料号已删除`, type: "success", duration: 2000 })
            this.getProductList()
          }
        })
      }
    },
    addInfo () {
      console.log(this.id)
      if (this.id == 0) {
        this.$message.error('请搜索物料')
        return
      }

      this.$router.push({
        path: "addSeries",
        query: {
          pid: '' + this.id,
          handler: "edit",
          product: {
            productCode: this.productNo,
            produceName: "",
            price: "",
            stock: "",
            isShow: "0"
          }        }
      });
    },
    getProductList () {
      LIAOHAO_LIST({
        productNo: this.productNo,
        pageNo: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.dataList;
        this.total = res.data.count;
        if (this.total > 0) {
          this.id = this.tableData[0].productId
          console.log('++++>' + this.id)
          this.productCode = this.tableData[0].productCode
          console.log('+++productCode+>' + this.productCode)
        } else {
          this.$message.error('无此物料数据')
        }
      });
    },
    checkDetail (row) {
      this.$router.push({
        path: "addSeries",
        query: {
          data: row,
          handler: "check"
        }
      });
    },
    modifyInfo (row) {
      // this.$router.push({
      //     path:'handleProduct',
      //     query:{
      //         data:row
      //     }
      // })

      this.$router.push({
        path: "addSeries",
        query: {
          data: row,
          handler: "edit"
        }
      });
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.getProductList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getProductList()
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  font-size: 20px;
  padding: 10px 0;
}
.tableBox {
  width: 100%;
  background: #fff;
  padding: 10px 2px;
  border-radius: 5px;
  //   box-shadow: 2px 3px 15px 0 #ccc;
}
.alerts {
  z-index: 2001;
  position: fixed;
  top: 20%;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}
.alertDiv {
  display: inline-block;
  width: 900px;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  font-size: 16px;
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: left;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.alertDd {
  width: 80%;
  margin: 6% auto;
  color: #606266;
}
.buttomF {
  margin-right: 31%;
  margin-top: 1%;
  padding-bottom: 2%;
  float: right;
}
.alertBg {
  z-index: 2000;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: #000;
}
</style>